
/**
 * 添加交互式的相机控制
 */

import * as THREE from 'three';
// import * as CANNON from 'cannon-es';
// import CannonDebugger from 'cannon-es-debugger';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

let canvas = document.getElementById("canvas") as HTMLCanvasElement;
let stage = new THREE.Object3D();

let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 20;

let scene = new THREE.Scene();
scene.add(stage);

let renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap

const controls = new OrbitControls(camera, renderer.domElement);
controls.minDistance = 1;
controls.maxDistance = 1000;
controls.update();

addViews();
animate();

function addViews() {
    let box = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshNormalMaterial());
    stage.add(box);
}

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
